Homework 11 - mobile app interactivity
Overview of Recipe Viewer
The recipe viewer is a simple minimalistic app for beginner cooks or busy individuals looking for a place to store their favorite recipes without all the fuss.
Key features
The key features include a clean and minimal home screen, a recipe detail viewer, smooth and quick navigation, and pre-loaded recipes.
The home screen is meant to be simple while still including all of the important information. As shown by the pictures below, each recipe will an individual card that the user can access easily. In addition, it will have an add more button that will either pull up a new card where the user can load a recipe or pull up an option for the premium version of the app.
The navigation aims to be quick and self-explanatory. The navigational flow of the app is meant to be very simple unlike competitor apps. Each image is a card that will lead to more details about a recipe once clicked on.
The recipe viewer will show up once a recipe is clicked. This will open a bigger image of the final product and include a “see more” button that will lead to ingredients and following steps. Each of these steps may have pictures depending on the difficulty of the task.
Individual Screen details
The following section documents the individual screens of the application, the elements on each screen, and how the user is expected to interact with the screen.
**NOTE: the following sections should be repeated for each of your screens, that is 2nd level screen name followed by a wireframe example and an as-built screen shot.
Home Screen
This is the home screen. This screen will display all of the available recipes along with a settings button and an “add more” option.
Below is my wireframe image.
As-built screenshot
Here is a screen shot of the image I created running on my phone.
Settings Screen
This is the settings screen. Currently, all it has is the referral code which can be used to unlock another slot for the recipe. Maybe might add more interactivity
As-built screenshot
Here is a screen shot of the image I created running on my phone.
Recipe Screen (Chicken Curry)
The recipe screen is the screen that shows up after clicking on the recipe from the main screen. The layout will be the same for each recipe, however the image and steps will be different.
wireframe design
Below is my wireframe image.
As-built screenshot
Here is a screen shot of the image I created running on my phone. Because it has a see more button, even though it is technically one screen, I included two screenshots to show the whole screen.
Recipe Screen (Breakfast Burrito’s)
The recipe screen is the screen that shows up after clicking on the recipe from the main screen. The layout will be the same for each recipe, however the image and steps will be different.
wireframe design
Below is my wireframe image.
As-built screenshot
Here is a screen shot of the image I created running on my phone. Because it has a see more button, even though it is technically one screen, I included two screenshots to show the whole screen.
Recipe Screen (Protein Pasta)
The recipe screen is the screen that shows up after clicking on the recipe from the main screen. The layout will be the same for each recipe, however the image and steps will be different.
wireframe design
Below is my wireframe image.
As-built screenshot
Here is a screen shot of the image I created running on my phone. Because it has a see more button, even though it is technically one screen, I included two screenshots to show the whole screen.
Add More Screen (NEW)
The recipe screen is the screen that shows up after clicking on the recipe from the main screen. This screen is revamped and adds interactivity. As shown on the settings screen, each user has a referral code. For the sake of testing we will use the user’s referral code, but as mentioned in Homework 8, the referral code allows the user to unlock another recipe slot. When entered correctly, so in this case “HW11Password” it leads to a recipe creation menu. You can enter a recipe and it will be saved as a new recipe in the main screen. In addition, I have added alerts when the referral code has been used more than once.
wireframe design
I did not have a wireframe image for this part of the app because I added it later. Additionally, it is very bare bones as it has no interactivity incorporated.
As-built screenshot
Here are multiple screenshots of the image I created running on my phone. Since there is a lot of interactivity I have included multiple screenshots to showcase what can occur. - The first screenshot is the screen that pops up when you click on “Add More”
As stated previously, the referral code that will be used for testing is “Homework11Password”. When that code is not entered, an alert pops up saying that the referral code was invalid.
Assuming you entered the correct code, the application will you take you to a screen where you can add a new recipe! In this screenshot, I have entered a new recipe for Orange Chicken.
After saving the recipe, I have a screenshot of the new home screen showcasing that there is a new card for the recipe I had just created.
Then I have a screenshot showing the screen that pops up once you click on the new card
The last screenshot is an alert that pops up if you had already clicked on the add more button
Snack code for the application
(this is a level 1 section, provide a snack that contains your currently working app which includes your screens and a navigation system. )
Reflection
- Discuss your experience coding hooks in this assignment. Which hooks were hardest? Which easiest? What helped you figure them out?
- Personally, I found the easiest hooks in the assignment were the alerts I add to this assignment. At first I had no clue how they worked, and were even confused why they weren’t showing up(I was viewing the app in the web). However, with a little debugging and googling it was pretty easy to find out my mistakes and correctly implement the alerts. The hardest hooks I dealt with was kind of the overall implementation of the interactivity. I definitely felt like it was not feasible me to make a fully fleshed version of this app considering I have the idea of referral codes. That would involve fetching data from different users which means I would need to keep track of so many more things such as user ID’s and more. This seemed very hard so I chose to use the user’s referral code for testing even if that would not be optimal if this was the complete app. I also tried to find a way to implement adding pictures as the user as the new recipe slot that appeared has no picture but I found it rather challenging. Lastly, for some reason even if you don’t save the first custom recipe, it gives the user an alert that you have saved the recipe and I was unable to fix that error. All of these are hooks I would hopefully be able to fix/implement if this was a fully fleshed out product.
- How much time did you spend on this specific assignment (homework 11 - interactivity)?
- I spent around 5 hours on this assignment however a majority of the time was spent googling and learning how to implement the interactive features that I had hoped for. It probably only took 1 to 2 hours of actual coding.
- What was the easiest part of this specific assignment (hw11)?
- As stated before I thought the easiest part was implementing the alerts. Got a couple of errors, but it was all in all easy to understand and then code.
- What is the hardest part of this specific assignment (hw11)?
- The hardest part was trying to implement my whole vision for the app. I spent a lot of time looking at how to extract data from different users and after a lot of trial and error, I realized it just wasn’t very possible in the space we were given. Considering I only had one snack it was near impossible to have two different versions of the app with two users and have them communicate with each other via a simple referral code. This made me switch it a little bit and use the users own referral code to implement interactivity. In a real world setting, it would make more sense that you would use someone else’ referral code to get a free recipe slot.
- Discuss your overall experience using Snack and developing this mobile app.
- I thought Snack was suprisingly good. At first I was a bit hesitant because it did seem limited. Although, especially in this assignment, I did run into the limits of using Snack, I still found it relatively user friendly especially with the app display constantly updating right next to the code.
README
A quality README is an important part of EVERY project. Using the Quarto include command we’re including a copy of your README in the project report so that a human can evaluate it.
Make sure that you edit the README so that it’s explanatory! Note that you don’t need a readme within the reports folder for this assignment. We’re only focused on the root README.md.
Here is some info on how to write a good README!
Homework 11 - Interactivity in your application
This homework assignment focuses on adding interactivity to your screens in the mobile app defined in homework 8. HW11 is an extension of HW10.
Here is a link to the homework assignment in Canvas.
Your report should be stored in the ./reports folder. Any assets (PNG, JPG, etc.) should be stored underneath in ./reports/assets.
Recipe Viewer
A minimalistic beginner friendly app that allows the user to store and view a collection of recipes.
Interactive Element
The add more button has been implemented and it includes new features - The user now has the ability to use his referral code to gain access to a new recipe slot
If the correct referral code is entered the user gains access to a custom recipe page where they can enter a recipe title, the list of ingredients, and the necessary steps to create the recipe.
Once saved, the recipe will appear as a new card on the home screen which can be accessed like any of the other cards.
That being said, the user is limited to only one additional recipe with his referral code.